{* Smarty *}
{*debug*}
<script language="javascript" type="text/javascript" src="../js/location.js"></script>
<div>
    <form method="POST"  name="catalog_name" action="{$url_location}" >
    Select Catalog:
    {if $folder_locations_empty != 'Y'}
    <select name="parent_id" onchange="document.catalog_name.submit()"> 
    {foreach from=$folder_locations item=folder key=key}
        <option value="{$folder.id}" {if $cur_catalog eq $folder.id}selected{/if}>{$folder.title}</option>
    {foreachelse}
        <option >Root</option>
    {/foreach}
    </select>
    </form>
    {else}
    <font class='red'> You must create a catalog before adding a product </font> 
    </form>
    {/if}
</div>
<br/>
    {if $folder_locations_empty != 'Y'}
<b>Products list of the catalog:</b> {$catalog_hs}
{$productlist}

{*================================================================*}
<br/>
<hr>
   Shopping Cart:
   <br><br>
	{if $cart!=""}
		<table>
			<tr>
				<td  align="center" class="dark">#</td>
				<td  align="center" class="dark">Title</td>
				<td  align="center" class="dark">Image</td>
				<td  align="center" class="dark">Price</td>
				<td  align="center" class="dark">Qty</td>
				<td  align="center" class="dark">SubTotal</td>
				<td  align="center" class="dark">Action</td>
			</tr>
			<form name="frec" method="post" action="?path=phone_orders&action=recalculate">
			{foreach from=$cart item=item}
				<tr>
					<td  align="right" class="light">{$item.catalog_id}</td>
					<td  align="left" class="light"><a title="Click for preview" style="text-decoration:none" href="?path=orderslist,productlist&page=edit&parent_id={$item.parent_id}&id={$item.catalog_id}">{$item.title}</a></td>
					<td  align="left" class="light">{$item.img_small}</td>
					<td  align="left" class="light">$ {$item.our_price}</td>
					<td  align="right" class="light"><input type="input" name="qty[{$item.catalog_id}]" value="{$item.qty}" style="text-align:right" size="7"></td>
					<td  align="right" class="light">$ {$item.subtotal}</td>
					<td  align="right" class="light"><a style="text-decoration:none" href="?path=phone_orders&action=delete&id={$item.catalog_id}">remove</a></td>
				</tr>
			{/foreach}   
				<tr>
					<td  colspan="5" class="footer" align="right"> Total: </td>
					<td  colspan="2" align="left" class="footer">$ {$total}</td>
				</tr>
			</form>
		</table>		<br>
		<input type="button" value="Clear cart" onclick="window.location.href='?path=phone_orders&action=clear'" class="button">
		<input type="button" value="Recalculate" onclick="document.forms['frec'].submit();" class="button">
	<input type="hidden" id="empty_cart" value="false">
	{else}
		{if $ok==""}<br><div style="background-color: #ffdfdf; border: solid 1px #555555; text-decoration: none;width:162; height:22;" align="center"> Shopping Cart is Empty. </div>
		{else}<br><div style="background-color: #efffff; border: solid 1px #555555; text-decoration: none;width:262; height:22;" align="center">{$ok}</div>
		{/if}
	<input type="hidden" id="empty_cart" value="true">
	{/if}
<form method='post' action='{$add_url}'>
</form>

{*================================================================*}

<br/>
<hr>
   Client:
   <br><br> {if $error!=""}<div align="center" style="background-color: #efffff;border: solid 1px #f9171F; text-decoration: none;width:355; height:25;padding:5">{$error}</div><br><br>{/if}
   <form method="post" action="?path=phone_orders&action=checkout" name="form_check_out">
		<input type="hidden" name="total" value="{$total_n}">
	<input type="radio" name="client" value="exists" id="rb_first"> Already exists 
		<select name="client_id" onclick="document.getElementById('rb_first').checked=true">
			{foreach from=$clients item=client}
				<option value={$client.id}> {$client.name} </option>
			{/foreach}
     	</select>
		<br><br>
	<input type="radio" CHECKED name="client" value="new" id="rb"> New<br><br>
				
		<table  cellpadding="0" cellspacing="0" border=0 valign="top" onclick="document.getElementById('rb').checked=true">
		<tr>
		<td rowspan="2">
		
			<table cellpadding="0" cellspacing="0" border=0>
			<tr>
				<td colspan="2" align="left" class="header"><font size="-1" color="black"> Account information</font></td>
			</tr>
			<tr>
				<td  align="right" class="dark">Name<sup><font color=red>*</font></sup>:&nbsp;</td>
				<td  align="left" class="light"><input type="input" name="c_name" value="" size="31"><br> <font color="#777777">Password is the same</font	></td>
			</tr>
			<tr>
				<td  align="right" class="dark">Email<sup><font color=red>*</font></sup>:&nbsp;</td>
				<td  align="left" class="light"><input type="input" name="c_email" value="" size="31"><br> </td>
			</tr>
			<tr>
				<td  align="right" class="dark">Phone<sup><font color=red>*</font></sup>:&nbsp;</td>
				<td  align="left" class="light"><input type="input" name="c_phone" value="" size="31"></td>
			</tr>
			<tr class="header"><td colspan="2" class="header"> <font size="-1" color="black">Credit card information</font> </td>
			</tr>
			<tr>
				<td colspan1="2" class="dark" align="right">Credit card type:</td>
				<td colspan1="2" class="light" align="right">
					<table cellpadding="0" cellspacing="0" border="0">
					<tr>
						<td class="light"><img src="../img/cards/visa.png" border="0" width="33"></td>
						<td class="light"><img src="../img/cards/mastercard.png" border="0" width="33"></td>
						<td class="light"><img src="../img/cards/discover.png" border="0" width="33"></td>
						<td class="light"><img src="../img/cards/americanexpress.png" border="0" width="33"></td>
					</tr>
					<tr>
			
						<td align="center" class="light"><input id='ctypeee' type="radio" name="cctype" value="VISA" checked></td>
						<td align="center" class="light"><input id='ctypeee' type="radio" name="cctype" value="MasterCard" ></td>
						<td align="center" class="light"><input id='ctypeee' type="radio" name="cctype" value="Discover" ></td> 
						<td align="center" class="light"><input id='ctypeee' type="radio" name="cctype" value="American Express" ></td>
					</tr>
					</table>
				</td>
            </tr>
            <tr class="dark" class="light"><td align="right">Credit Card Numer:<sup><font color=red>*</font></sup>&nbsp;</td><td class="light"><input type="text"  name="ccnumber" class='inputtext' style='width: 95%'></td></tr>
            <tr class="dark" class="light"><td align="right">CVV<sup><font color=red>*</font></sup>:&nbsp;</td><td class="light"><input type="text" name="cccvv"  class='inputtext' style='width: 95%'></td></tr>
            <tr class="dark" class="light"><td align="right">Credit Card Owner:<sup><font color=red>*</font></sup>&nbsp;</td><td class="light"><input type="text" name="ccholdername" class='inputtext' style='width: 95%'></td></tr>
            <tr class="dark" class="light">
				<td align="right">Expiration Months/Year:<sup><font color=red>*</font></sup>&nbsp;</td>
				<td class="light">{html_select_date prefix="expdate" month_format="%m" start_year="-1" end_year="+6" display_days=false}</td>
			</tr>
			</table>
			
		</td>
		<td>
		</td>
		<td>
			<table cellpadding="0" cellspacing="0" border=0 valign="top">
			<tr>
				<td  colspan="2" align="left" class="header"><font size="-1" color="black"> Billing information</font></td>
			</tr>
			<tr>
				<td  align="right" class="dark">Country:</td>
				<td  align="left" class="light"><SELECT id="client_billing_country" style="width:95%" OnChange="FillState(document.form_check_out.client_billing_country, document.form_check_out.client_billing_state,'')"  name="client_billing_country" class="inputtext"></SELECT></td>
			</tr>
			<tr>
				<td  align="right" class="dark">Address<sup><font color=red>*</font></sup>:&nbsp;</td>
				<td  align="left" class="light"><input type="input" name="c_address" value="" size="25"></td>
			</tr>
			<tr>
				<td  align="right" class="dark">City<sup><font color=red>*</font></sup>:&nbsp;</td>
				<td  align="left" class="light"><input type="input" name="c_city" value="" size="25"></td>
			</tr>
			<tr>
				<td  align="right" class="dark">State:</td>
				<td  align="left" class="light"><SELECT  style="width:95%" size=1 name="client_billing_state" value="Alabama" class="inputtext"></SELECT></td>
			</tr>
			<tr>
				<td  align="right" class="dark">Zip<sup><font color=red>*</font></sup>:&nbsp;</td>
				<td  align="left" class="light"><input type="input" name="c_zip" value="" size="8"></td>
			</tr>
			</table>
		
			<table cellpadding="0" cellspacing="0" border=0 valign="top">
			<tr>
				<td  colspan="2" align="left" class="header"><font size="-1" color="black"> Shipping details</font></td>
			</tr>
			<tr>
				<td  align="right" class="dark">Country:</td>
				<td  align="left" class="light"><SELECT  style="width:95%" OnChange="FillState(document.form_check_out.client_shipping_country, document.form_check_out.client_shipping_state,'')"  name="client_shipping_country" class="inputtext"></SELECT></td>
			</tr>
			<tr>
				<td  align="right" class="dark">Address:</td>
				<td  align="left" class="light"><input type="input" name="c_shipping_address" value="" size="25"></td>
			</tr>
			<tr>
				<td  align="right" class="dark">City:</td>
				<td  align="left" class="light"><input type="input" name="c_shipping_city" value="" size="25"></td>
			</tr>
			<tr>
				<td  align="right" class="dark">State:</td>
				<td  align="left" class="light"><SELECT  style="width:95%" size=1 name="client_shipping_state" value="Alabama" class="inputtext"></SELECT></td>
			</tr>
			<tr>
				<td  align="right" class="dark">Zip:</td>
				<td  align="left" class="light"><input type="input" name="c_shipping_zip" value="" size="8"></td>
			</tr>
			</table>
		</td>
		</tr>
		
		</table><font color="Red"><sup>*</sup> - fields required</font>
		<br><hr>
		
		{literal}
                    <script>
                    
                    function trueCF(){
                    	
                    	var f = document.forms['form_check_out'];
                        err = '';
					   
                        e = f.elements['c_name'];
                        if(!e || e.value=='') {
                            err += "\n\tType your first name";
                        }
						
						e = f.elements['c_phone'];
                        if(!e || e.value=='') {
                            err += "\n\tType your phone number";
                        }
						e = f.elements['ccnumber'];
						if(!e || e.value=='') {
							err += "\n\tType your credit card number";
						}
						e = f.elements['cccvv'];
						if(!e || e.value=='') {
							err += "\n\tType your CVV number";
						}
						e = f.elements['ccholdername'];
						if(!e || e.value=='') {
							err += "\n\tType credit card owner";
						}
						e = f.elements['c_address'];
						if(!e || e.value=='') {
							err += "\n\tType your address";
						}
						e = f.elements['c_city'];
						if(!e || e.value=='') {
							err += "\n\tType your city";
						}
						e = f.elements['c_zip'];
						if(!e || e.value=='') {
							err += "\n\tType your zip code";
						}
						
						e = f.elements['c_email'];
                        var re = new RegExp("^[a-zA-Z]+[0-9a-zA-Z_]+@[0-9a-zA-Z]+");
                       	if(re.exec(e.value)==null){
                       		err += "\n\tWrong email";
                              }
						
						if(document.getElementById('empty_cart').value=='true') {
                            alert("Shopping cart is EMPTY\n");
                            return false;
							}				
							
                        if(err!='' && document.getElementById('rb').checked==true) {
                            alert("You haven't fill all required fields:\n"+err);
                            return false;
							}
						
						if(document.forms['form_check_out'].elements['client_id'].value=="") {
                            alert("Wrong Client");
                            return false;
							}
						
                        return true;
                        
                    }
                    </script>
                     {/literal}
		
		<input type="submit" value="CheckOut" class="button"  onclick="javascript: return trueCF(); ">
	</form>
{/if}
				<SCRIPT>
                        FillCountry(document.form_check_out.client_billing_country, document.form_check_out.client_billing_state, 'USA');
                        FillState(document.form_check_out.client_billing_country, document.form_check_out.client_billing_state, '');
                        FillCountry(document.form_check_out.client_shipping_country, document.form_check_out.client_shipping_state, 'USA');
						FillState(document.form_check_out.client_shipping_country, document.form_check_out.client_shipping_state, '');
				</SCRIPT>
				
